<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
    //vue中的过滤器的了解，应用场景有哪些
    /**
     * 过滤器就是把不必要的东西过滤掉
     * vue可以自定义过滤器 常用于文本格式化 vue3中废弃了过滤器filter
     * 过滤器可以被用在两个地方插值语法和v-bind表达式 过滤器应该在js表达式的尾部 由管道符|表示
     * 过滤器分为全局过滤器和局部过滤器 在组件中与与metods同级filters里面写入过滤器名字，它是一个函数可以接收参数
     * 全局的过滤器是vue.filter('过滤器名',方法(参数){})要在vue实例创建之前写
     * 过滤器还可以串联 在{{a|filterA,filterB}}中a代表filterA的第一个参数，过滤器filterB时第二个过滤器有两个参数分别是a和filtera
     * 应用场景：
    */ 
//   {{arr.sex|filterA}}
//     let arr =[
//         {title:'张三',sex:0},
//         {title:'张三',sex:1},
//         {title:'张三',sex:0},
//         {title:'张三',sex:1},
//     ]
//     filters:{
//         filterA:function(val){
//             if(val==0){
//                 return '男'
//             }else{
//                 return '女'
//             }
//         }
//     }

        //SPA首屏加载速度慢怎么解决？
        /**
         * 首屏时间，指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间
         * SPA 首屏加载时间慢的原因？
            网络延时问题
                资源文件体积是否过大
                资源是否重复发送请求去加载了
                加载脚本的时候，渲染内容堵塞了
                解决方案
            常见的几种SPA首屏优化方式
                减小入口文件积
                静态资源本地缓存
                UI框架按需加载
                图片资源的压缩
                组件重复打包
                开启Gzip压缩
                使用SSR
        */
       //对vue的diff算法的了解
       /**
        * diff算法就是通过同层的树节点进行比较的高效算法
        * 特点是只能比较同级不能跨层级比较
       */
      //v-if和v-for的区别优先级是什么
      /**
       * v-for比v-if优先级高 如果把两者同时使用时每次v-for循环都会执行v-if
       * 当v-if不依赖于v-for中某一个值的前提下来判断v-for是否显示隐藏这时候我们需要在template中进行判断 这样可以让v-if优先级更高
       * 当v-if依赖于v-for中的属性时 我们可以在computed中进行提前过滤不需要的项 重新生成新的数组在dom循环中我们只要循环这个新的数组即可
       * computed中判断远远比v-if判断的成本要低得多
      */

        //谈谈你对keep-alive的了解
        /**
         * keep-alive是vue中的内置组件，能在组件切换过程中将状态保存在内存中，防止重复渲染dom
         * keep-alive在包裹动态组件时会缓存不活动的组件而不是销毁他们 
         * 可以设置props属 
         * include 只有匹配的元素名字才会被缓存
         * exclude 任何名称匹配的组件都不会被缓存
         * max 数字 最多可以缓存多少组件
         * keep-active 缓存后如何获取数据 有两种方式 beforeRouteEnter activated
        */
</script>